Google Ajax APIs

1. Google AJAX APIs Implement rich, dynamic web sites entirely in JavaScript and HTML. Eric 2010

2. Outline • Self-Introduction • Google APIs Introduction • Google Ajax Search API • Google Maps API • Google Chart API • Google Data API

3. Self Introduction

4. Self Introduction • Eric

5. Google APIs Introduction

6. Google APIs Introduction • 8 category APIs • Over 80 APIs we can use • http://code.google.com/

8. Google Code Web Site • US site vs. Taiwan site

9. Developer Resources • Google Code Website • http://code.google.com/ • Code Playground • http://code.google.com/apis/ajax/playground/ • Firefox & Firebug • http://moztw.org/ • Google Code Blog • http://googlecode.blogspot.com/

10. Some Interesting APIs #1 • Google Account Authentication ‧ Get access into desktop or mobile applications. • Google AJAX Feed API ‧ Get access into desktop or mobile applications. • Google AJAX Language API ‧ Easily translate and detect multiple languages using JavaScript. • Android ‧ Build mobile apps for mobile devices. • Google App Engine ‧ Run your web applications on Google's infrastructure. • Google Apps ‧ Extend Google Apps, integrate or build new apps. • Blogger Data API ‧ Enable your apps to view and update Blogger content.

11. Some Interesting APIs #2 • Google Calendar APIs and Tools ‧ Create and manage events, calendars • Google Chrome Extensions ‧ Modify and enhance the functionality of Google Chrome • Google Earth API ‧ Embed Google Earth into your web page. • KML ‧ Create and share content with Google Earth, Maps • Google Libraries API ‧ Load open source JavaScript libraries. • reCAPTCHA ‧ An anti-bot service. • YouTube APIs ‧ Integrate YouTube videos into your website or application.

12. WHAT LANGUAGES WE USE IN THIS OFFERING • JavaScript • HTML

13. Google AJAX Search API

14. Google AJAX Search API Intro • The Google AJAX Search API lets you put Google Search in your web pages with JavaScript. • Getting Start ‧ Get Google AJAX Search API Key and start coding ‧ Or Generate cut-and-paste HTML, it’s an easy way • Web Resources ‧ http://code.google.com/apis/ajaxsearch/ ‧ http://groups-beta.google.com/group/Google-AJAX-Search-API ‧ http://code.google.com/apis/ajaxsearch/samples.html

15. Google AJAX Search API Wizards #1 • http://code.google.com/apis/ajaxsearch/wizards.html

16. Google AJAX Search API Wizards #2 • For Example : Video Search Wizard • http://www.google.com/uds/solutions/wizards/videosearch.html • Only 4 Steps • Customize it • Tell Google about your web site • Generate code for your web page • Paste code in your web page

17. "Hello World" of Google AJAX Search API #1 • Sign-up for an AJAX Search API Key

18. &quot;Hello World&quot; of Google AJAX Search API #2 • The &quot;Hello, World&quot; of Google AJAX Search API • Sample Code • http://www.google.com/uds/samples/apidocs/helloworld.html • Using the Google AJAX API Loader <script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi?key=ABCDEFG&quot;></script> <script type=&quot;text/javascript&quot;> google.load(&quot;search&quot;, &quot;1&quot;); </script>

19. &quot;Hello World&quot; of Google AJAX Search API #3 • Call this function when the page has been loaded function initialize() { var searchControl = new google.search.SearchControl(); searchControl.addSearcher(new google.search.WebSearch()); searchControl.addSearcher(new google.search.NewsSearch()); searchControl.draw(document.getElementById(&quot;searchcontrol&quot;)); } • Execute Search function searchControl.execute(&quot;VW GTI&quot;); • Use google.setOnLoadCallback to register the specified handler function google.setOnLoadCallback (initialize); • Put <div> in HTML <div id=&quot;searchcontrol&quot;>Loading</div>

21. Google AJAX Search API Overview #sample code1 // create a searcher object var sc = new google.search.SearchControl(); // add one or more searchers, specifying options as needed var options = new google.search.SearcherOptions(); options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); sc.addSearcher(new google.search.WebSearch(), options); ... // activate the search control by calling it's .draw() method sc.draw(document.getElementById(&quot;myDiv&quot;));

22. Google AJAX Search API Overview #sample code2 <!-- A collection of web search results in the search control --> <div class=&quot;gsc-results gsc-webResult&quot;> <!-- A single web result in the search control --> <div class=&quot;gsc-result gsc-webResult&quot;> <!-- A single web result, full structure defined below --> <div class=&quot;gs-result gs-webResult&quot;></div> </div> ... </div> <!-- Similar pattern for local, blog, etc. --> <div class=&quot;gsc-results gsc-localResult&quot;></div> <div class=&quot;gsc-results gsc-blogResult&quot;></div>

23. The Search Control • google.search.SearchControl • google.search.SearchForm • google.search.CustomSearchControl • GSmapSearchControl • GSvideoBar • GSnewsBar • GSvideoSearchControl • GSbookBar • GSblogBar

24. google.search.SearchControl #1 • An instance of google.search.SearchControl represents a single search control on a page • 是用來裝載搜尋功能的控制容器，所有搜尋功能的物件都必須放入這個容器中才能運作。 • 要建立 google.search.SearchControl 物件，可以使用下列範例語法 var searchControl = new google.search.SearchControl();

25. google.search.SearchControl #2 - addSearcher(searcher, opt_options) • 這個函式可以將搜尋器加入搜尋控制容器中。搜尋控制容器在最後執行搜尋動作的階段，會針對它所擁有的搜尋器進行相對應的搜尋與顯示搜尋結果的動作 • searcher – 指定搜尋器的種類 • opt_options – 非必填引數。這個引數可以針對搜尋器進行外觀與行為的細部設定

26. google.search.SearchControl #3 - draw(element, GdrawOptions) • 本函式會為每個加入搜尋控制容器的搜索器進行搜尋介面繪製的動作。只有在所有搜索器都已加入搜索控制容器後，才可以呼叫此函式。 • element – HTML 區塊元素。我們可以將搜尋控制容器放置到指定的 HTML 區塊元素之中。通常 HTML 區塊元素是指 HTML 中的 <div> 元素。 • GdrawOptions – 非必填的引數。這個引數可以用來設定搜尋結果的顯示外觀。

27. google.search.SearchControl #4 - setTimeoutInterval(timeoutInterval) • 當我們利用 draw 函式中的 Gdrawoptions 引數來自訂搜尋輸入欄位時，就可以使用 setTimeoutInterval 這個函式。這個函式可以讓我們設定執行搜尋的時間間隔，每當使用者在搜索輸入欄位中鍵入搜尋關鍵字時，就會有計時器依據這個時間間隔開始進行倒數計時。當倒數結束，就會依據搜尋欄位中的關鍵字開始進行搜尋動作。 timeoutInterval 可填入之有效值 時間間隔 google.search.SearchControl.TIMEOUT_SHORT 350ms google.search.SearchControl.TIMEOUT_MEDIUM 500ms google.search.SearchControl.TIMEOUT_LONG 700ms

28. google.search.SearchControl #5 - execute(str) • 本函式可以讓搜尋控制容器中所有的搜尋器依照所傳入的搜尋關鍵字進行搜尋的動作。 • str – 搜尋關鍵字。

29. google.search.SearchControl #6 - setOnKeepCallback(object, method, opt_keepLabel) • 本函式可以讓我們設定緊跟在搜尋結果後面的連結，以及按下此連結時會被呼叫的函式。當使用者點擊該連結後，會將該筆的搜尋結果物件傳送給我們所呼叫的函式。透過這種方式，我們就可以對搜尋結果進行更進一步的處理。 • object – 要呼叫函式所屬的物件名稱。 • method – 要呼叫的函式名稱。 • opt_keepLabel – 功能按鈕的顯示樣式。 屬性 說明 google.search.SearchControl.KEEP_LABEL_SAVE 「保持」連結樣式 google.search.SearchControl.KEEP_LABEL_INCLUDE 「包括」連結樣式 google.search.SearchControl.KEEP_LABEL_COPY 「複製」連結樣式 google.search.SearchControl.KEEP_LABEL_BLANK 空白連結樣式 其他任意文字 顯示該文字連結

30. google.search.SearchControl #7 - clearAllResults() • 本函式可以清除目前搜尋控制容器中的所有搜尋結果。

31. google.search.SearchControl #8 - setLinkTarget(linkTarget) • 本函式指定當使用者點擊搜尋結果連結時，在哪一個網頁框架顯示該連結網頁。 • linkTarget – 設定點擊搜尋結果時，在哪一個網頁框架顯示該連結網頁。

32. google.search.SearchControl #9 - setSearchCompleteCallback(object, method) • 我們可以透過 setSearchCompleteCallback 設定在搜尋動作完成時所呼叫的函式。要注意的是，搜尋控制容器中每一個搜尋器完成搜尋的時候就會執行一次要被呼叫的函式。舉例來說，如果搜尋控制容器中的搜尋器有兩個，該函式在搜尋動作完成後就會被執行兩次。 • object - 要呼叫函式所屬的物件名稱。 • method - 要呼叫的函式名稱。

33. google.search.SearchControl #10 - setSearchStartingCallback(object, method) • 我們可以透過 setSearchStartingCallback 設定在搜尋動作開始時所呼叫的函式。要注意的是，搜尋控制容器中每一個搜尋器開始搜尋的時候就會執行一次要被呼叫的函式。舉例來說，如果控制元件中的搜尋器有兩個，該函式在搜尋動作開始時後就會被執行兩次。 • object - 要呼叫函式所屬的物件名稱。 • method - 要呼叫的函式名稱。

34. google.search.SearchControl #11 - setNoResultsString(str) • 我們可以使用本函式設定當搜尋不到結果時，網頁所顯示的文字。 • str - 當搜尋不到結果時，網頁所顯示的文字。

35. google.search.SearchForm #1 • The google.search.SearchForm object is a light weight object that is designed for exactly this use case. It provides applications with a text input element, a search button, an optional clear button, as well as all standard branding. • • 要建立 google.search.SearchForm 物件，可以使用下列範例語法 var searchForm = new google.search.SearchForm(enableClear, element); • enableClear – 這個引數為 ture 時，搜索輸入欄位就會包含一個清除搜尋結果的按鈕，否則將不會有清除搜尋結果的按鈕。 • element – HTML Element 。

36. google.search.SearchForm #2 - setOnSubmitCallback(object, method) • setOnSubmitCallback 可以讓我們設定點選搜尋按鈕後所呼叫的物件與函式，此外搜尋輸入欄位的值也會被傳遞到要被呼叫的函式中。 • object - 要呼叫函式所屬的物件名稱。 • method - 要呼叫的函式名稱。

37. google.search.SearchForm #3 - setOnClearCallback(object, method) • 本函式將會設定按下搜索輸入欄位的「清除」按鈕時被呼叫的物件與函式。如果在建立 google.search.SearchForm 物件時，沒有建立清除搜尋結果的按鈕，則呼叫此函式時會發生錯誤。此外，搜尋輸入欄位的值也會被傳遞到要被呼叫的函式中。 • object - 要呼叫函式所屬的物件名稱。 • method - 要呼叫的函式名稱。

38. google.search.SearchForm #4 - execute(query) • 利用 execute 函式，可以讓搜尋器依照所傳入的搜尋關鍵字進行搜尋的動作。 • query - 執行搜尋時所使用的關鍵字。

39. Searchers #1

40. Searchers #2 • google.search.WebSearch var searcher = new google.search.WebSearch(); • google.search.LocalSearch var searcher = new google.search.LocalSearch(); • google.search.VideoSearch var searcher = new google.search.VideoSearch(); • google.search.BlogSearch var searcher = new google.search.BlogSearch();

41. Searchers #3 • google.search.NewsSearch var searcher = new google.search.NewsSearch(); • google.search.ImageSearch var searcher = new google.search.ImageSearch(); • google.search.BookSearch var searcher = new google.search.BookSearch(); • google.search.PatentSearch var searcher = new google.search.PatentSearch();

42. GResult #1 • Result objects are produced using a JSON encoding of server search requests. • 當我們透過搜尋器進行搜尋動作後，除了會在指定的網頁元素位置上顯示搜尋結果外，也會根據搜尋器的種類回傳不同的搜尋結果物件。瞭解搜尋結果物件的屬性，可以讓我們對搜尋結果物件進行更進一步的處理

43. GResult #2 • Result objects are produced using a JSON encoding of server search requests. • 當我們透過搜尋器進行搜尋動作後，除了會在指定的網頁元素位置上顯示搜尋結果外，也會根據搜尋器的種類回傳不同的搜尋結果物件。瞭解搜尋結果物件的屬性，可以讓我們對搜尋結果物件進行更進一步的處理

44. Searcher Options • When adding a searcher to the search control, the GsearcherOptionsgoogle.search.SearcherOptions object may be specified. // create a searcher options object // set up for open expansion mode // load a searcher with these options var options = new google.search.SearcherOptions(); options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); searchControl.addSearcher(new google.search.WebSearch(), options);

45. DrawOptions Options • When asking a search control to draw, you must specify a container for the control to draw within. • In addition to this required parameter, the search control's .draw() method also accepts an optional google.search.DrawOptions object. // create a drawOptions object var drawOptions = new google.search.DrawOptions(); drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED); searchControl.draw(element, drawOptions);

46. Google Maps API

47. Google Maps API Family • Google Maps has a wide array of APIs that let you embed the robust functionality and everyday usefulness of Google Maps into your own website and applications

48. Google Maps JavaScript API V3 • V3: The Solution for Maps Applications for both the Desktop and Mobile Devices • The version 3 of the Google Maps API will look similar to the existing version 2 of the Google Maps API. • Who uses Maps API: • Yelp: http://www.youtube.com/watch?v=jWmLCpE_nwg • 地圖日記 • Web Resources • http://groups.google.com/group/google-maps-js-api-v3 • http://code.google.com/apis/maps/documentation/javascript/

49. &quot;Hello World&quot; of Google Maps V3 #1 • Sample Code URL • http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html • Declaring Your Application as HTML5 <!DOCTYPE html> • Loading the Google Maps API <html> <head> <meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, user-scalable=no&quot; /> <script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps/api/js?sensor=set_to_true_or_false&quot;> </script>

50. &quot;Hello World&quot; of Google Maps V3 #2 • Map DOM Elements <div id=&quot;map_canvas&quot; style=&quot;width: 100%; height: 100%&quot;></div> • Map Options var myLatlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; • Create instance var map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions);

51. Geolocation • Geolocation refers to the identification of the geographic location of a user or computing device via a variety of data collecton mechanisms. • Newer browsers are starting to support the W3C Geolocation standard. // Try W3C Geolocation method (Preferred) if( navigator.geolocation ) { navigator.geolocation.getCurrentPosition( function( position ) { initialLocation = new google.maps.LatLng( position.coords.latitude,position.coords.longitude ); …… });}

52. Developing for Mobile Devices • You can detect iPhone and Android devices by inspecting the navigator.userAgent function detectBrowser() { var useragent = navigator.userAgent ; var mapdiv = document.getElementById(&quot;map_canvas&quot;); if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) { mapdiv.style.width = '100%'; mapdiv.style.height = '100%'; } else { mapdiv.style.width = '600px'; mapdiv.style.height = '800px'; } }

53. Localization in the V3 Maps API • Language Localization <script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps/api/js?sensor=false&language=ja&quot;> • Region Localization <script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps/api/js?sensor=false&region=GB&quot;>

54. Base objects - LatLng • LatLng is a point in geographical coordinates, latitude and longitude . var latlng = new google.maps.LatLng(60, 105); Methods Return Value Description equals(other: LatLng ) boolean Comparison function. lat() number Returns the latitude in degrees. lng() number Returns the longitude in degrees. toString() string Converts to string representation. toUrlValue() string Returns a string of the form &quot;lat,lng&quot; for this LatLng.

55. Base objects – LatLngBounds#1 • A LatLngBounds instance represents a rectangle in geographical coordinates . var c = new google.maps.LatLngBounds(latlngA, latlngB); Methods Return Value Description contains(latLng: LatLng ) boolean Returns true if the given lat/lng is in this bounds. equals(other: LatLngBounds ) boolean Returns true if this bounds approximately equals the given bounds. extend(point: LatLng ) LatLngBounds Extends this bounds to contain the given point. getCenter() LatLng Computes the center of this LatLngBounds getNorthEast() LatLng Returns the north-east corner of this bounds. getSouthWest() LatLng Returns the south-west corner of this bounds. intersects(other: LatLngBounds ) boolean Returns true if this bounds shares any points with this bounds. isEmpty() boolean Returns if the bounds are empty.

56. Base objects – LatLngBounds#2 toSpan() LatLng Converts the given map bounds to a lat/lng span. toString() string Converts to string. toUrlValue(precision?:number) string Returns a string of the form &quot;lat_lo,lng_lo,lat_hi,lng_hi&quot; for this bounds, where &quot;lo&quot; corresponds to the southwest corner of the bounding box, while &quot;hi&quot; corresponds to the northeast corner of that box. union(other: LatLngBounds ) LatLngBounds Extends this bounds to contain the union of this and the given bounds.

57. google.maps.Map • Language Localization varmap = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions); • Some Functions setCenter(latlng: LatLng ) setMapTypeId(mapTypeId: MapTypeId ) setOptions(options: MapOptions ) setZoom(zoom:number) getMapTypeId() getZoom()

58. Google Maps Javascript API V3 Controls • Navigation control • Scale control • MapType control • You don't access or modify controls directly. Instead, you modify the map's MapOptions fields which affect the visibility and presentation of controls. You can adjust control presentation upon instantiating your map (with appropriate MapOptions) or modify a map dynamically by calling setOptions() to change the map's options.

59. The Default Control Set Control Large Screens Small Screens iPhone Android Navigation Large Pan/Zoom for sizes larger than 400x350px Small Mini-Zoom for sizes smaller than 400x350px Not present &quot;Android&quot; control MapType Horizontal Bar for screens larger than 320px wide Dropdown for screens smaller than 320px wide Same as Large/Small Screens Same as Large/Small Screens Scale Not present Not present Not present Not present

60. Disabling the Default UI function initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), disableDefaultUI: true , mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions); }

61. Adding Controls to the Map { navigationControl: boolean, mapTypeControl: boolean, scaleControl: boolean } function initialize() { var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), navigationControl: true, mapTypeControl : true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions); }

62. Control Options • Navigation control • google.maps.NavigationControlStyle.SMALL • google.maps.NavigationControlStyle.ZOOM_PAN • google.maps.NavigationControlStyle.ANDROID • google.maps.NavigationControlStyle.DEFAULT • MapType control • google.maps.MapTypeControlStyle.HORIZONTAL_BAR • google.maps.MapTypeControlStyle.DROPDOWN_MENU • google.maps.MapTypeControlStyle.DEFAULT

63. Control Positioning function initialize() { var myOptions = { zoom: 12, center: new google.maps.LatLng(-28.643387, 153.612224), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.BOTTOM }, navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN, position: google.maps.ControlPosition.TOP_RIGHT }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.TOP_LEFT } } var map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions); }

64. Google Maps Javascript API V3 Events #1 • UI Events • click • dblclick • mouseup • mousedown • mouseover • mouseout • Map Events • zoom_changed • center_changed • bounds_changed • mousedown • mouseover • mouseout • Other Events • drag • dragend • dragstart • maptypeid_changed • rightclick

65. Google Maps Javascript API V3 Events #2 var marker = new google.maps.Marker({ position: myLatlng, map: map, title:&quot;Hello World!&quot; }); google.maps.event.addListener(marker, 'click', function() { map.setZoom(8); });

66. Google Maps Javascript API V3 Events #3 • Accessing Arguments in UI Events • MouseEvent google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); Properties Type Description latLng LatLng The latitude/longitude that was below the cursor when the event occurred.

67. Google Maps JavaScript API V3 Overlays #1 • Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. Overlays reflect objects that you &quot;add&quot; to the map to designate points, lines, areas, or collections of objects. • several types of overlays: • markers • polylines • overlay map types • info window • custom overlays

68. Google Maps JavaScript API V3 Overlays #2 • Adding Overlays var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, } var map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions); var marker = new google.maps.Marker({ position: myLatlng, title:&quot;Hello World!&quot; }); // To add the marker to the map, call setMap(); marker.setMap(map);

69. Google Maps JavaScript API V3 Overlays #3 • Removing Overlays • http://code.google.com/apis/maps/documentation/javascript/examples/overlay-remove.html // Removes the overlays from the map, but keeps them in the array function clearOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } }} // Shows any overlays currently in the array function showOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(map); } }} // Deletes all markers in the array by removing references to them function deleteOverlays() { if (markersArray) { for (i in markersArray) { markersArray[i].setMap(null); } markersArray.length = 0; }}

70. Google Maps JavaScript API V3 Overlays #4 • Markers var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:&quot;Hello World!&quot; });

71. Google Maps JavaScript API V3 Overlays #5 • Simple Icons var image = 'beachflag.png'; var myLatLng = new google.maps.LatLng(-33.890542, 151.274856); var beachMarker = new google.maps.Marker({ position: myLatLng, map: map, icon: image }); • Complex Icons var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, title: beach[0], zIndex: beach[3] });

72. Google Maps JavaScript API V3 Overlays #6 • Polylines • A polyline supports the following stroke styles: • strokeColor • strokeOpacity • strokeWeight var flightPlanCoordinates = [ new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, strokeColor: &quot;#FF0000&quot;, strokeOpacity: 1.0, strokeWeight: 2 }); flightPath.setMap(map);

73. Google Maps JavaScript API V3 Overlays #7 • Polygons • A polygons supports the ploylines stroke styles and fill styles: • fillColor • fillOpacity var triangleCoords = [ new google.maps.LatLng(25.774252, -80.190262), new google.maps.LatLng(18.466465, -66.118292), new google.maps.LatLng(32.321384, -64.75737), new google.maps.LatLng(25.774252, -80.190262) ]; // Construct the polygon // Note that we don't specify an array or arrays, but instead just // a simple array of LatLngs in the paths property bermudaTriangle = new google.maps.Polygon({ paths: triangleCoords, strokeColor: &quot;#FF0000&quot;, strokeOpacity: 0.8, strokeWeight: 2, fillColor: &quot;#FF0000&quot;, fillOpacity: 0.35 }); bermudaTriangle.setMap(map);

74. Google Maps JavaScript API V3 Overlays #8 • Ground var oldmap = new google.maps.GroundOverlay( &quot;http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg&quot;, imageBounds); oldmap.setMap(map);

75. Google Maps JavaScript API V3 Overlays #9 • InfoWindows • Methods • InfoWindow options • content • pixelOffset • position • maxWidth Methods Return Value Description close() None Closes this InfoWindow getContent() string|Node getPosition() LatLng getZIndex() number open(map: Map | StreetViewPanorama , anchor?: MVCObject ) None setContent(content:string|Node) None

76. Google Maps JavaScript API V3 Overlays #10 • KML and GeoRSS Layers • The Google Maps API supports the KML and GeoRSS data formats for displaying geographic information. These data formats are displayed on a map using a KmlLayer object, whose constructor takes the URL of a publicly accessible KML or GeoRSS file.

77. Google Maps JavaScript API V3 Overlays #11 • The Traffic Layer • The Bicycling Layer • http://gmaps-samples.googlecode.com/svn/trunk/mapcoverage_filtered.html

80. Google Maps JavaScript API V3 Services #3 • Geocoding function codeAddress() { var address = document.getElementById(&quot;address&quot;).value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert(&quot;Geocode was not successful for the following reason: &quot; + status); } }); }

81. Google Maps JavaScript API V3 Services #4 • Reverse Geocoding function codeLatLng() { var input = document.getElementById(&quot;latlng&quot;).value; var latlngStr = input.split(&quot;,&quot;,2); var lat = parseFloat(latlngStr[0]); var lng = parseFloat(latlngStr[1]); var latlng = new google.maps.LatLng(lat, lng); geocoder.geocode({'latLng': latlng}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { map.setZoom(11); marker = new google.maps.Marker({ position: latlng, map: map }); infowindow.setContent(results[1].formatted_address); infowindow.open(map, marker); } } else { alert(&quot;Geocoder failed due to: &quot; + status); } }); }

82. Google Maps JavaScript API V3 Services #5 • The DirectionsRequest object literal contains the following fields: { origin: LatLng | String, destination: LatLng | String, travelMode: DirectionsTravelMode, unitSystem: DirectionsUnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidHighways: Boolean, avoidTolls: Boolean region: String }

83. Google Maps JavaScript API V3 Services #6 • Street View var fenway = new google.maps.LatLng(42.345573,-71.098326); var mapOptions = { center: fenway, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl: true }; var map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), mapOptions);

85. Google Chart Tools

86. Google Chart Tools • The Google Chart Tools enable adding live charts to any web page. • The advantages of the Google Chart Tools • A rich gallery of visualizations provided as: • Image charts - using a simple URL request to a Google chart server • Interactive charts - using a Google developed JavaScript library • Can read live data from a variety of data sources • Simple to use and free

87. Google Chart Tools – Image Charts #1 • Chart Gallery • http://code.google.com/apis/chart/docs/gallery/chart_gall.html

88. Google Chart Tools – Image Charts #2 • Chart Wizard • http://imagecharteditor.appspot.com/

89. Google Chart Tools – Image Charts #3 • The Google Chart API returns a chart image in response to a URL GET or POST request. http://chart.apis.google.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters ... OR <form action='http://chart.apis.google.com/chart' method='POST'> <input type=&quot;hidden&quot; name=&quot;cht&quot; value=&quot;lc&quot; /> <input type=&quot;hidden&quot; name=&quot;chtt&quot; value=&quot;This is | my chart&quot; /> <input type='hidden' name='chs' value='600x200' /> <input type=&quot;hidden&quot; name=&quot;chxt&quot; value=&quot;x,y&quot; /> <input type='hidden' name='chd' value='t:40,20,50,20,100'/> <input type=&quot;submit&quot; /> </form>

90. Google Chart Tools – Image Charts #4 • Glossary of Chart Terms

91. Google Chart Tools – Image Charts #5 • Chart Play Ground • http://code.google.com/apis/chart/docs/chart_playground.html

92. Google Chart Tools – Interactive Charts #1 • The key steps for embedding a visualization in your page • Add a <div> to your page <!--Div that will hold the pie chart--> <div id=&quot;my_chart_div&quot;></div> • Load your libraries <!--Load the AJAX API--> <script type=&quot;text/javascript&quot; src=&quot;http://www.google.com/jsapi&quot;></script> <script type=&quot;text/javascript&quot;> // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['piechart']}); // Load multiple Google packages: // google.load('visualization', '1', {'packages':['piechart', 'table', 'linechart']}); <script>

93. Google Chart Tools – Interactive Charts #2 • The key steps for embedding a visualization in your page • Prepare your data var data = new google.visualization.DataTable(); // Declare columns and rows. data.addColumn('string', 'Task'); // Column 0 is type string and has label &quot;Task&quot;. data.addColumn('number', 'Hours per Day'); // Column 1 is type number and has label &quot;Hours per Day&quot;. // Add data. data.addRows([ ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); • Create an instance of your visualization • Draw your visualization

94. Google Chart Tools – Interactive Charts #3 • The key steps for embedding a visualization in your page • Create an instance of your visualization var chart = new google.visualization.PieChart(document.getElementById('chart_div')); • Draw your visualization chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

95. Google Chart Tools – Interactive Charts #4 • Code Example • http://code.google.com/apis/visualization/documentation/examples.html

96. Google Data Protocol

97. Google Data Protocol • The Google Data Protocol provides a secure means for external developers to write new applications that let end users access and update the data stored by many Google products. • External developers can use the Google Data Protocol directly, or they can use any of the supported programming languages provided by the client libraries. • The protocol currently supports two primary modes of access: • AtomPub • JSON • http://code.google.com/apis/gdata/

98. Google Data Protocol – API Directory • http://code.google.com/apis/gdata/docs/directory.html

99. Authentication in the Google Data Protocol • AuthSub • Oauth • http://googlecodesamples.com/oauth_playground/index.php • ClientLogin • Gadgets

100. Google Data Protocol – For Example • Google Calendar Data API • Retrieving all calendars • https://www.google.com/calendar/feeds/default/allcalendars/full • Picasa Web Albums Data API • Requesting a list of albums • http://picasaweb.google.com/data/feed/api/user/ userID